.header{
    width: 100%;
    margin-top: px2rem(64px);
    background-color: #fff;
    .header-top{
        display: flex;
        background-color: #fff;
        width: 100%;
        position: fixed;
        height: px2rem(40px);
        align-items: center;
        border-bottom: 1px solid #e4e4e4;
        z-index: 4;
        .item{
            font-size: px2rem(13px);
            color: #2f2f2f;
            border-right: 1px solid #ddd;
            flex: 1;
            text-align: center;
            position: relative;
               background-color: #fff;
            &:last-child{
                border: none;
            }
            &.cate:after,&.type:after {
                content: '';
                display: inline-block;
                width: px2rem(5px);
                height: px2rem(5px);
                border: 1px solid #666;
                border-width: 0 1px 1px 0;
                transform: rotate(45deg);
                -webkit-transform: rotate(45deg);
                margin-bottom: px2rem(2px);
                margin-left: px2rem(6px);
                transition: .3s;
                -o-transition: .3s;
            }
            &.filter:after{
                content: '';
                display: inline-block;
                width: px2rem(12px);
                height: px2rem(12px);
                transform: rotate(0);
                background-image: url("./img/filter.png");
                background-size: cover;
            }
            &.current:not(.filter)::after {
                transform: rotate(225deg);
                -webkit-transform: rotate(225deg);
            }
            &::before {
                display: none;
                content: '';
                position: absolute;
                top: px2rem(23px);
                left: 49%;
                width: px2rem(7px);
                height: px2rem(7px);
                background-color: #fff;
                border: 1px solid #e4e4e4;
                border-width: 0 1px 1px 0;
                transform: rotate(225deg);
                -webkit-transform: rotate(225deg);
            }
            &.current:before{
                display: block;
            }
        }
    }
    .panel{
        position: fixed;
        z-index: 1;
        left: 0;
        top: px2rem(105px);
        bottom: 0;
        right: 0;
        background-color: rgba(0,0,0, 0.7);
        display: none;
        &.show {
            display: block;
            touch-action: none;
        }
        .panerl-inner{
          height: px2rem(300px);
          overflow-x: hidden;
          overflow-y: auto;
          background-color: #fff;
          >ul {
              display: none;
              background-color: #fff;
              &.current{
                  display: block;
              }
          }
          .item-title{
              position: relative;
              font-size: px2rem(12px);
              height: px2rem(30px);
              line-height: px2rem(30px);
              background-color: #efefef;
              color: #666;
              padding-left: px2rem(13px);
              &:before {
                  content: '';
                  position: absolute;
                  display: block;
                  margin-top: px2rem(8px);
                  margin-left: px2rem(-13px);
                  width: px2rem(2px);
                  height: px2rem(16px);
                  background-color: #ffd161;
              }
          }
          .item-content{
              min-height: px2rem(20px);
              .cate-box{
                  float: left;
                  width: 33.33%;
                  font-size: px2rem(12px);
                  padding: px2rem(10px);
                  box-sizing: border-box;
                  .cate-box-inner{
                      border: 1px solid #c4c4c4;
                      text-align: center;
                      color: #666;
                      height: px2rem(37px);
                      line-height: px2rem(37px);
                      position: relative;
                      &.active {
                          background-color: #fffbf1;
                          color: #ffb000;
                          border-color: #ffb000;
                      }
                      &.has-icon {
                         img{
                             display: block;
                             position: absolute;
                             width: px2rem(16px);
                             height: px2rem(16px);
                             top: px2rem(10px);
                             left: px2rem(4px);
                         }
                      }
                  }
              }
          }
          .type-panel{
              .type-item{
                  height: px2rem(44px);
                  border-bottom: 1px solid #e9e9e9;
                  line-height: px2rem(44px);
                  color: #666;
                  font-size: px2rem(13px);
                  padding-left: px2rem(20px);
                  &.active {
                      color: #ffb000;
                  }
              }
          }
          .filter-panel{
            .filter-item{
                margin-top: 5px;
                margin-bottom: 10px;
                padding-left: 5px;
                padding-right: 5px;
                .filter-title{
                    color: #999;
                    font-size: 12px;
                    padding-left: 14px;
                }
            }
          }
        }
    }
}